<template>
  <van-popup
    get-container="#app"
    :value="value"
    @input="$emit('input', $event)"
    @open="isReport = false"
  >
    <!-- 默认插槽 -->
    <van-cell-group v-if="!isReport">
      <van-cell @click="disLiske" icon="closed-eye">不感兴趣</van-cell>
      <van-cell is-link @click="isReport = true">反馈垃圾内容</van-cell>
      <van-cell icon="info-o">拉黑作者</van-cell>
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport = false">返回</van-cell>
      <van-cell
        @click="reportArt(item.value)"
        v-for="item in reports"
        :key="item.value"
        >{{ item.label }}</van-cell
      >
      <!-- <van-cell>色情</van-cell>
      <van-cell>暴力</van-cell>
      <van-cell>低俗</van-cell>
      <van-cell>不适</van-cell>
      <van-cell>错误</van-cell>
      <van-cell>其他</van-cell> -->
    </van-cell-group>
  </van-popup>
</template>

<script>
import { disLiskeById, reportById } from "../../../api/home";
import { reports } from "../../../utils/const";
export default {
  emits: ["input"],
  props: {
    // 外边v-model传值：接收必须叫value
    value: {
      type: Boolean,
      default: false,
    },
    artId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 是否显示上报垃圾内容
      isReport: false,
      reports,
    };
  },
  methods: {
    // 举报
    async reportArt(val) {
      try {
        await reportById(this.artId, val);
        this.$toast.success("举报成功");
        // 关闭弹层
        this.$emit("input", false);
        // 通知父组件删除当前文章
        this.$emit("del-dlike");
      } catch (e) {
        if (e.response.status === 409) {
          return this.$toast.fail("已经举报过了");
        }
        this.$toast.fail("举报失败");
      }
    },
    // 对文章不感兴趣
    async disLiske() {
      console.log("对文章不感兴趣");
      /**
       * 1. 调用接口=》数据库更新
       * 2. 把当前用户不感兴趣的文章删除
       */
      try {
        await disLiskeById(this.artId);
        this.$toast.success("不感兴趣成功！");
        // 通知父删除不感兴趣文章
        this.$emit("del-dlike");
        // 关闭弹层
        this.$emit("input", false);
      } catch (error) {
        console.dir(error);
        this.$toast.fail("操作失败！");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.van-popup {
  width: 80%;
  border-radius: 4px;
}
</style>
